<!doctype html>

<html>
  
  <head>
    <title>Campanha</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <style type="text/css">
      /* Space out content a bit */
      body {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      /* Everything but the jumbotron gets side spacing for mobile first views */
      .header, .marketing, .footer {
        padding-left: 15px;
        padding-right: 15px;
      }
      /* Custom page header */
      .header {
        border-bottom: 1px solid #e5e5e5;
      }
      /* Make the masthead heading the same height as the navigation */
      .header h3 {
        margin-top: 0;
        margin-bottom: 0;
        line-height: 40px;
        padding-bottom: 19px;
      }
      /* Custom page footer */
      .footer {
        padding-top: 19px;
        color: #777;
        border-top: 1px solid #e5e5e5;
      }
      /* Customize container */
      @media(min-width: 768px) {
        .container {
          max-width: 730px;
        }
      }
      .container-narrow > hr {
        margin: 30px 0;
      }
      /* Main marketing message and sign up button */
      .jumbotron {
        text-align: center;
        border-bottom: 1px solid #e5e5e5;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }
      /* Supporting marketing content */
      .marketing {
        margin: 40px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }
      /* Responsive: Portrait tablets and up */
      @media screen and(min-width: 768px) {
        /* Remove the padding we set earlier */
        .header, .marketing, .footer {
          padding-left: 0;
          padding-right: 0;
        }
        /* Space out the masthead */
        .header {
          margin-bottom: 30px;
        }
        /* Remove the bottom border on the jumbotron for visual effect */
        .jumbotron {
          border-bottom: 0;
        }
      }
    </style>
  </head>
  
  <body>
  <div class="container">
    <div class="navbar navbar-inverse">
      
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="\">#precojusto</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="\">Inicio</a>
            </li>
            <li>
              <a href="\como_funciona.html">Como funciona</a>
            </li>
          </ul>
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Localizar Campanhas..." class="form-control">
            </div>
            <a href="/ver_campanhas.html" class="btn btn-primary">Buscar</a>
          </form>
        </div>
        <!--/.navbar-collapse -->
      </div>
   
      <div class="jumbotron">
        <div class="container">
          <h1>Produto/Servi&ccedil;o</h1>
          <p>Descri&ccedil;&atilde;o da campanha</p>
          <span class="badge">1000k de adeptos</span>
          <p style></p>
        </div>
        <a class="btn btn-primary btn-lg">Aderir &agrave; campanha &raquo;</a>
      </div>
      <div class="container">
        <!-- Example row of columns -->
        <div class="row">
          <div class="col-lg-4">
            <h2>Produto/servi&ccedil;o alternativo</h2>
            <p>Descri&ccedil;&atilde;o do produto/servi&ccedil;o alternativo</p>
            <p></p>
          </div>
          <div class="col-lg-4">
            <h2>Dura&ccedil;&atilde;o</h2>
            <p>Dura&ccedil;&atilde;o da campanha</p>
            <h2>Compartilhar</h2>
            <div class="btn-group">
              <a class="btn btn-default">Twitter</a><a></a><a class="btn btn-default">Facebook</a><a class="btn btn-default">Google+</a>
            </div>
            <p></p>
          </div>
          <div class="col-lg-4">
            <p></p>
          </div>
        </div>
        <div class="footer">
          <p>&copy; JWAR 2014</p>
        </div>
      </div>
      <!-- /container -->
    </div>
  </body>

</html>